<template>
	<view class="list">
		<!-- 顶部搜索框 -->
		<nav-bar class="l_top" isBack backColor="#fff">
			<view class="l_tCan" slot="center">
				<view class="l_tBg"></view>
				<view class="l_tInput">
					<view class="l_tIcon iconfont icon-search"></view>
					<input  confirm-type="search" type="text" v-model="keyword" @confirm="searchData" placeholder="搜索您感兴趣的内容吧" placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bar>
		
		<view class="l_contain">
			<view class="l_cCan">
				<!-- tab栏 -->
				<view class="l_cTabs">
					<view class="l_ctTab" id="tab_goods" :class="{'active': tabType === 'goods'}" @click="toggleTab('goods')">全部</view>
					<view class="l_ctTab" id="tab_store" :class="{'active': tabType === 'store'}" @click="toggleTab('store')">店铺</view>
					<view class="l_ctCursor" id="tab_cursor" :style="{'transform': 'translateX(' + (tabCursorX ? tabCursorX : '166r') + 'px)'}"></view>
				</view>
				<!-- 操作栏 -->
				<view class="l_cOper" v-if=" tabType === 'goods'">
					<view class="l_coItem item1" data-text="综合" @click="ordertype('sale')" :class="'sale' == order_type ? 'active':''" >综合</view>
					<view class="l_coItem item2" data-text="销量" @click="ordertype('mix')" :class="'mix' == order_type ? 'active':''" >销量</view>
					<view class="l_coItem" @tap="filterPop = true">
						<image class="l_coIcon" src="/static/mall/shaixuna.png"/>
						<text>筛选</text>
					</view>
				</view>
				<!-- 操作栏 -->
				<view class="l_cOper" v-if=" tabType === 'store'">
					<view class="l_coItem item2" data-text="综合" @click="ordersale('mix')" :class="'mix' == is_order_sale ? 'active':''" >综合</view>
					<view class="l_coItem item2" data-text="销量" @click="ordersale('sale')" :class="'sale' == is_order_sale ? 'active':''" >销量</view>
					
				</view>
				<!-- 数据 -->
				<view class="l_cData">
					<!-- 商品 -->
					<scroll-view class="l_cGoods" scroll-y @scrolltolower="l_cGoodsscroll" v-if="tabType === 'goods'">
						<view class="l_cgList">
							<view class="l_cgItem" v-for="item in goodsList" @tap="toPage('goods', { goodsId: item.product_id })">
								<view class="l_cgImage"><image :src=" item.main_imgurl"></image></view>
								<view class="l_cgCont">
									<view class="l_cgName omit-2">{{item.product_title}}</view>
									<view class="l_cgTags">
										<view class="l_cgTag"></view>
									</view>
									<view class="l_cgPrice">
										<!-- <text class="l_cgCost">￥<text>{{item.primary_price}}</text></text> -->
										<text class="l_cgFee">￥<text>{{item.price}}</text></text>
										<view class="yprice" v-if="item.rate_price"><i>底价</i>￥<text>{{item.rate_price}}</text></view>
									</view>
									<view class="l_cgSell">{{item.volume}}人付款</view>
								</view>
							</view>
							<view style="text-align: center;color: #999;line-height: 80rpx;">到底了~</view>
						</view>
					</scroll-view>
					<!-- 店铺 -->
					<scroll-view class="l_cStore" scroll-y @scrolltolower="l_cStorescroll" v-else>
						<view class="l_csList">
							<view class="l_csItem" v-for="items in storeList">
								<view class="l_csBtn" @click="toPage('store', { storeId: items.store_id })">进店</view>
								<view class="l_csInfo">
									<view class="l_csHead"><image :src=" items.store_logo"></image></view>
									<view class="l_csName">{{items.store_name}}</view>
									<view class="l_csTags">
										<view class="l_csTag"></view>
									</view>
								</view>
								<view class="l_csGoods">
									<view class="l_csGood" v-for="(item,indexs) in items.push_product" v-if="indexs < 3">
										<image :src=" item.main_imgurl"></image>
										<view class="l_csPrice">￥<text>{{item.price}}</text></view>
									</view>
								</view>
							</view>
							<view style="text-align: center;color: #999;line-height: 80rpx;">到底了~</view>
						</view>
					</scroll-view>
					
				</view>
			</view>
		</view>
		
		<!-- 弹窗-筛选框 -->
		<view class="pop_filter" v-if="filterPop">
			<view class="p_fBg" @tap="filterPop = false"></view>
			<view class="p_fBox">
				<view class="p_fTop">
					<view class="p_fTit">价格区间（元）</view>
					<view class="p_fInputMore">
						<view class="p_fInput"><input type="number" placeholder="最低价" placeholder-class="placeholder" v-model="minPrice" /></view>
						<view class="p_fGap">—</view>
						<view class="p_fInput"><input type="number" placeholder="最高价" placeholder-class="placeholder" v-model="maxPrice" /></view>
					</view> 
					<view class="p_fTit">品牌 <view class="more" v-if="brandLsts.length > 15" @click ="showTag"><i>{{setstroename}}</i>更多<text class="iconfont icon-more"></text></view></view>
					<!-- <view class="p_fTit">品牌 <view class="more" @click = "showTag">{{flag?"更多":"收起"}}<text class="iconfont icon-more"></text></view></view> -->
					<view class="p_fCheckbox p_fCheckbox2 ">
						<!-- brandLstpop = false -->
						<!-- active为选中状态 -->
						<view class="p_fcItem" v-for="(item,index) in brandLsts" @click="barndkstchose(item.store_id)" :class="{active:store_id_lst.includes(item.store_id)}"><view class="omit-2">{{item.store_name}}</view></view> 
					</view>
					<!-- <view class="p_fTit">品类 <view class="more" v-if="cateLst.length > 15" @click = "showTags">{{flags?"更多":"收起"}}<text class="iconfont icon-more"></text></view></view>
					<view class="p_fCheckbox p_fCheckbox2" :class="{active:!flags}"> -->
						<!-- active为选中状态 -->
					<!-- 	<view class="p_fcItem" v-for="(item,index) in cateLst"  @click="cateLstchose(item.cate_id)"  :class="{active:cateOne_id_lst.includes(item.cate_id)}"><view class="omit-2">{{item.cate_name}}</view></view> 
					</view> -->
					
				</view>
				<view class="p_fBtm">
					<view class="p_fReset" @click="closefiltrpop">重置</view>
					<view class="p_fConfim" @click="filterPops">确认</view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗-品牌 -->
		<view class="pop_filter" v-if="brandLstpop" style="z-index: 999;">
			<view class="p_fBg" @tap="brandLstpop = false"></view>
			<view class="p_fBox">
				<view class="p_fTop" style=" padding-left: 0;">
					<view class="b_container">
						<!-- 搜索 -->
						<view class="b_search">
							<view class="b_sInput">
								<view class="i_siIcon"><view class="iconfont icon-search"></view></view>
								<input type="text" @input="searchBrand" placeholder="查找品牌" placeholder-class="col-666"/>
							</view>
						</view>
						
						<scroll-view class="b_scroll" scroll-y :scroll-into-view="scrollSort">
							<!-- 数据 -->
							<view class="b_sort">
								<view class="b_sGroup" v-for="items in filterList" :key="items.sort" :id="'sort' + items.sort">
									<view class="b_sTit">{{items.sort}}</view>
									<view class="b_sList">
										<view class="b_sItem" v-for="item in items.list" :key="item.store_id" @click="barndchoselist(item)">
											<view class="setchose" :class="{active:store_id_lst.includes(item.store_id)}"></view>
											<view class="b_sLogo"><image :src=" item.store_logo"></image></view>
											<view class="b_sName">{{item.store_name}}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					
					<!-- 筛选 -->
					<view class="b_filter" @touchstart.stop.prevent="sortTouchMove" @touchmove.stop.prevent="sortTouchMove" id="filter">
						<view class="b_fLetter" v-for="item in filter" :data-sort="item">{{item}}</view>
					</view>
					
					
					
				</view>
				<view class="p_fBtm">
					<view class="p_fReset" @click="closebrandLstpop">清空</view>
					<view class="p_fConfim" @click="brandLstpop = false">确认</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import service_mall from '@/service/mall.js'

export default {
	components: { navBar },
	
	data() {
		return {
			ImageUrl: URL.IMAGE,
			cateId: null,
			// tab栏
			tabType: 'goods',   // 页面类型   商品: goods 店铺: store
			tabCursorX: 0,
			// tab_cursor: null,  
			// tab_goods: null,  
			// tab_store: null,
			// 商品数据
			goodsPage: 1,
			pagesize:10,
			goodsList: [],
			// 店铺数据
			storeIsGet: false,
			storeLoading: false,
			storePage: 1,
			storeList: [],
			// 筛选
			filterPop: false,
			brandLstpop:false,
			brandLsts:[],
			cateLst:[],
			store_id_lst:[],//选中的品牌
			cateOne_id_lst:[],//选中的一级品类
			cate_id_lst:[],//二品类
			order_type:'',//销量排序：sale 综合排序：mix
			minPrice:'',
			maxPrice:'',
			keyword:'',
			flag:true,
			flags:true,
			is_order_sale:"",
			//品牌
			ImageUrl: URL.IMAGE,
			filter: ["#","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
			filterItemHeight: null,
			filterItemTop: null,
			brandList: [],    // 品牌数据
			filterList: [],   // 筛选后的品牌数据
			searchVal: '',
			scrollSort: null,
			setstroename:[]
		}
	},
	
	onLoad(options) {
		this.$utils.getUrl()
		// testcode
		if(options.cateId){
			this.cateId = options.cateId
			this.cateOne_id_lst.push(this.cateId )
			this.cateOne_id_lst= this.cateOne_id_lst.map(function (item, index, array) {
			          return item - 0;
			 })
		}
		if(options.cate_id_lst){
			this.cate_id_lst.push(options.cate_id_lst)
			this.cate_id_lst= this.cate_id_lst.map(function (item, index, array) {
			          return item - 0;
			 })
		}
		if(options.keyword){
			this.keyword = options.keyword
		}
		this.getGoods()
		this.getbrandLst()
		this.getcateLst()
		this.getbrand()
	},
	methods: {
		l_cGoodsscroll(){
			this.goodsPage++
			this.getGoods()
		},
		l_cStorescroll(){
			this.storePage++
			this.getStore()
		},
		showTag(){
		      this.brandLstpop = true
			  setTimeout(() => {
			  		uni.createSelectorQuery()
			  			.select('#filter')
			  			.boundingClientRect()
			  			.exec(res => {
			  				this.filterItemTop = res[0].top
			  				this.filterItemHeight = res[0].height / this.filter.length
			  			})
			  	}, 200)
		},
		showTags(){
		      this.flags = !this.flags
		},
		closefiltrpop(){
			this.store_id_lst = []//选中的品牌
			this.cateOne_id_lst = []//选中的品类
			this.minPrice = ''
			this.maxPrice = ''
		},
		filterPops(){
			this.goodsPage=1
			if(parseInt(this.maxPrice) < parseInt(this.minPrice)){
				uni.showToast({ title: '商品最低最小价格必须小于最大价格！', icon: 'none' })
				return
			}
			this.filterPop = false,
			this.goodsList = []
			this.getGoods()
		},
		barndchoselist(item){
			if(this.store_id_lst.includes(item.store_id)){
				this.store_id_lst=this.store_id_lst.filter(function (ele){return ele != item.store_id;});
				this.setstroename = this.setstroename.filter(function (ele){return ele != item.store_name;});
			}else{
				this.store_id_lst.push(item.store_id);
				this.setstroename.push(item.store_name);
			}
		},
		closebrandLstpop(){
			this.store_id_lst=[]
			this.setstroename = []
			this.brandLstpop = false
		},
		//商品销量
		ordertype(type){
			if(this.order_type == type){
				this.order_type = ''
				this.goodsPage= 1
				this.goodsList=[]
				this.getGoods()
			}else{
				this.order_type = type
				this.goodsPage= 1
				this.goodsList=[]
				this.getGoods() 
			}
		},
		//店铺销量
		ordersale(e){
			if(this.is_order_sale == e){
				this.is_order_sale = ''
				this.storePage= 1
				this.storeList = []
				this.getStore()
			}else{
				this.is_order_sale = e
				this.storePage= 1
				this.storeList = []
				this.getStore()
			}
		},
		searchData(){
			if(this.tabType === 'goods'){
				this.goodsList=[]
				this.goodsPage= 1
				this.getGoods()
			}else{
				this.storeList = []
				this.storePage= 1
				this.getStore()
			}
		},
		barndkstchose(id){
			if(this.store_id_lst.includes(id)){
				this.store_id_lst=this.store_id_lst.filter(function (ele){return ele != id;});
			}else{
				this.store_id_lst.push(id);
			}
		},
		cateLstchose(id){
			if(this.cateOne_id_lst.includes(id)){
				this.cateOne_id_lst=this.cateOne_id_lst.filter(function (ele){return ele != id;});
			}else{
				this.cateOne_id_lst.push(id);
			}
		},
		// 获取商品列表
		getGoods() {
				let params = {
					page: this.goodsPage,
					store_id_lst:this.store_id_lst.join(",") ,
					cateOne_id_lst:this.cateOne_id_lst.join(","),
					cate_id_lst:this.cate_id_lst.join(","),
					minPrice:this.minPrice,
					maxPrice:this.maxPrice,
					keyword:this.keyword,
					order_type:this.order_type,
					sale_type:2,
				}
				service_mall.goods_getLists(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data.data
							// 处理数据
							data.forEach(val => {
								val.volume = val.volume ? val.volume : 0
							})
							for(var i=0;i<data.length;i++){
								this.goodsList.push(data[i]); // 加载的数据追加在上一页后面
							}
						}
					})
					.catch(err => {
						
					})
			
		},
		//刷选品牌
		getbrand(){
			service_mall.brand_get({
				cate_id: this.cateOne_id_lst.join(","),  // 分类id(int)
				two_cate_id: this.cate_id_lst.join(","),  // 二级分类id(int)
				sale_type:2,
			}).then(res=>{
				this.brandLsts = res.data.LstStore
			})
		},
		// 品牌列表
		getbrandLst(){
			service_mall.getmallcateLst({})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						// let data = res.data
						let filter = this.filter
						let brandList = data.LstStore
						let brand = {}
						let nList = []
						// 处理数据
						for (let i = 0; i < filter.length; i++) {
							for (let j = 0; j < brandList.length; j++) {								
								let letter = filter[i]
								if (letter === brandList[j].sort) {
									brand[letter] ? brand[letter].push(brandList[j]) : brand[letter] = [brandList[j]]
								}
							}
						}
						for (let key in brand) {
							nList.push({ sort: key, list: brand[key]})
						}
						
						this.filterList = nList
						this.brandList = nList
						this.choiceList = data.pushStore
					}
				})
		},
		// 搜索品牌
		searchBrand(e) {
			let value = e.detail.value
			
			if (this.searchTimer) clearTimeout(this.searchTimer)			
			if (value && value.trim()) {
				this.searchTimer = setTimeout(() => {
					let brandList = this.brandList
					let newList = []
					for (let i = 0; i < brandList.length; i++) {
						let brand = brandList[i].list
						let data = { sort: brandList[i].sort, list: [] }
						for (let j = 0; j < brand.length; j++) {
							if (brand[j].store_name.indexOf(value.trim()) != -1) {
								data.list.push(brand[j])
							}
						}
						if (data.list.length) newList.push(data)
					}
					
					this.searchEdit = true
					this.filterList = newList
				}, 500)
			}
			else {
				if (this.searchEdit) {
					this.filterList = this.brandList
					this.searchEdit = false
				}				
			}
		},
		sortTouchMove(e) {
			let pageY = e.touches[0].pageY
			let index = Math.floor((pageY - this.filterItemTop) / this.filterItemHeight) 
			let sort = this.filter[index]
			if (sort) {
				this.intoSort(sort)
			}
		},
		
		intoSort(sort) {
			if (this.scrollSort !== sort) this.scrollSort = sort === '#' ? 'sortTop' : 'sort' + sort
		},
		// 品类列表
		getcateLst(){
			service_mall.class_getList({})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.cateLst = data.cateLst
					}
				})
		},
		// 获取店铺列表
		getStore() {
				let params = {
					page: this.storePage,
					order_type:this.is_order_sale,
					keyword:this.keyword,
					pcate_id:this.cateOne_id_lst.join(","),
					cate_id:this.cate_id_lst.join(","),
					sale_type:2,
				}
				service_mall.goods_getStore(params)
					.then(res => {
						if (res.code == 1) {
							let data = res.data.data
							for(var i=0;i<data.length;i++){
								this.storeList.push(data[i]); // 加载的数据追加在上一页后面
							}
						}
					})
					.catch(err => {
						
					})
			
		},
		
		// 切换tab栏
		toggleTab(type) {
			if (this.tabType != type) {
				this.tabType = type
				this.tabCursorTo(type)
				
				// 第一次切换到店铺 => 获取店铺数据
				if (type === 'store' && !this.storeIsGet) {
					this.storeIsGet = true
					this.getStore()
				}
			}
		},
		
		// 移动tab栏光标
		tabCursorTo(type) {
			let target = 'tab_' + type
			
			if (this[target] && this.tab_cursor) {
				this.tabCursorX = this[target].left + (this[target].width / 2) - (this.tab_cursor.width / 2)
			}
			// 获取tab栏某一项
			else if (this.tab_cursor) {
				uni.createSelectorQuery().select("#" + target).boundingClientRect(res => {
					this[target] = res
					this.tabCursorTo(type)
				}).exec()
			} 
			// 获取光标
			else {
				uni.createSelectorQuery().select("#tab_cursor").boundingClientRect(data => {
					this.tab_cursor = data
					this.tabCursorTo(type)
				}).exec()
			}
		},
		
		// 跳转页面
		toPage(page, { storeId, goodsId } = {}) {
			if (page === 'store') uni.navigateTo({ url: "/pages_mall/pages/mall/store/store?storeId=" + storeId })
			else if (page === 'goods') uni.navigateTo({ url:`/pages_mall/pages/mall/goods_details/goods_details?id=${goodsId}` })
		}
	}
}
</script>

<style lang="scss" scoped>
.list {height: 100vh;display: flex;flex-flow: column;
	// 顶部搜索框
	.l_top {position: relative;z-index: 100;
		.l_tCan {width: 100%;height: 66rpx;padding-right: 50rpx;}
		.l_tBg {width: 100vw;height: 500rpx;background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);position: fixed;top: 0;left: 0;z-index: -1;}
		.l_tInput {height: 66rpx;border-radius: 34rpx;background: #fff;position: relative;opacity: .8;
			& > input {width: 100%;height: 100%;font-size: 24rpx;padding-left: 72rpx;}
		}
		.l_tIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #6c6c6c;font-size: 32rpx;position: absolute;top: 18rpx;left: 32rpx;}
	}
	
	.l_contain {padding-top: 40rpx;position: relative;z-index: 101;overflow: hidden;flex: 1;
		.l_cCan {height: 100%;border-radius: 24rpx 24rpx 0 0;background: #f6f7fb;display: flex;flex-flow: column;}
		// tab栏
		.l_cTabs {height: 84rpx;display: flex;position: relative;
			.l_ctTab {height: 84rpx;line-height: 76rpx;text-align: center;font-size: 32rpx;flex: 1;
				&.active {font-weight: bold;}
			}
			.l_ctCursor {width: 40rpx;height: 8rpx;background: #ffd425;border-radius: 4rpx 4rpx 0 0;position: absolute;bottom: 0;left: 0;transform: translateX(166rpx);transition: all .3s}
		}
		// 操作栏
		.l_cOper {width: 100%;height: 94rpx;background: #fff;display: flex;
			.l_coItem {height: 100%;position: relative;display: flex;justify-content: center;align-items: center;flex: 1;}
			.l_coIcon {width: 34rpx;height: 26rpx;margin-right: 10rpx;}
			.item1 {				
				&::after {content: '';width: 0;height: 0;border: 8rpx solid transparent;border-top: 8rpx solid #000;position: absolute;right: 76rpx;top: 44rpx;}
			}
			.item2 {
				&::after {content: '';width: 0;height: 20rpx;border-right: 1px solid rgba(0, 0, 0, .08);position: absolute;top: 36rpx;right: 0;}
			}
			.active{
				color: #FFD425;
				&::after{
					color: #FFD425;
					    border-top: 8rpx solid #FFD425;
				}
			}
		}
		// 数据
		.l_cData {overflow: hidden;flex: 1;}
		// 商品
		.l_cGoods {height: 100%;overflow-y: auto;
			.l_cgList {padding-bottom: 32rpx;}
			.l_cgItem {height: 212rpx;margin: 32rpx 32rpx 0;background: #fff;border-radius: 8rpx;overflow: hidden;position: relative;}
			.l_cgImage {width: 212rpx;height: 212rpx;float: left;}
			.l_cgCont {padding: 26rpx 26rpx 0;overflow: hidden;}
			.l_cgName {min-height: 80rpx;line-height: 40rpx;}
			.l_cgTags {height: 32rpx;margin-top: 14rpx;display: flex;}
			.l_cgTag {height: 32rpx;line-height: 32rpx;font-size: 22rpx;color: #939393;padding-right: 24rpx;position: relative;
				&::after {content: "";width: 1px;height: 14rpx;background: #939393;position: absolute;top: 50%;right: 12rpx;transform: translateY(-50%) scaleX(.5);}
				&:last-child::after {content: none;}
			}
			.l_cgPrice {position: absolute;right: 20rpx;bottom: 20rpx;}
			.l_cgFee {color: #e9423e;font-size: 28rpx;font-weight: bold;padding-left: 4rpx;display: block;text-align: right;
				& > text {font-size: 32rpx;}
			}
			.l_cgCost {text-decoration: line-through;color: #939393;font-size: 14rpx;
				& > text {font-size: 18rpx;}
			}
			.l_cgSell {height: 32rpx;line-height: 32rpx;color: #939393;font-size: 22rpx;margin-top: 10rpx;}
		}
		// 店铺
		.l_cStore {height: 100%;overflow-y: auto;
			.l_csList {padding-bottom: 28rpx;}
			.l_csItem {height: 344rpx;border-radius: 8rpx;margin: 28rpx 32rpx 0;background: #fff;position: relative;overflow: hidden;}
			.l_csBtn {width: 122rpx;height: 44rpx;line-height: 44rpx;text-align: center;color: #cbaf87;font-size: 22rpx;border: 1px solid #e7dec8;border-radius: 22rpx;position: absolute;top: 26rpx;right: 24rpx;}
			.l_csInfo {padding: 24rpx 0 0 24rpx;overflow: hidden;}
			.l_csHead {width: 76rpx;height: 76rpx;margin-right: 16rpx;border-radius: 50%;background: #f6f7fb;				overflow: hidden;float: left;}
			.l_csName {height: 40rpx;line-height: 40rpx;margin-top: 8rpx;}
			.l_csTags {height: 28rpx;display: flex;}
			.l_csTag {height: 28rpx;line-height: 28rpx;color: #939393;font-size: 20rpx;padding-right: 40rpx;position: relative;
				&::after {content: "";width: 1px;height: 14rpx;background: #939393;position: absolute;top: 50%;right: 20rpx;transform: translateY(-50%) scaleX(.5);}
				&:last-child::after {content: none;}
			}
			.l_csGoods {padding-top: 26rpx;display: flex;}
			.l_csGood {width: 196rpx;height: 196rpx;margin-left: 24rpx;border-radius: 8rpx;background: #f0f0f0;position: relative;overflow: hidden;}
			.l_csPrice {height: 30rpx;line-height: 32rpx;color: #fff;font-size: 14rpx;padding: 0 10rpx 0 6rpx;border-top-right-radius: 10rpx;background: rgba(0, 0, 0, .5);position: absolute;bottom: 0;left: 0;
				& > text {font-size: 20rpx;}
			}
		}
	}
	
	// 弹窗-筛选框
	.pop_filter {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 501;
		.p_fBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);}
		.p_fBox {width: 612rpx;height: 100%;background: #fff;position: absolute;top: 0;right: 0;display: flex;flex-flow: column;}
		.p_fTop {padding: 130rpx 0 0 32rpx;overflow-y: auto;flex: 1;}
		.p_fTit {height: 40rpx;line-height: 40rpx;font-weight: bold;margin-top: 62rpx;
		         .more{
					 float: right;
					 font-size: 24rpx;
					 color: #666;
					 font-weight: normal;
					 margin-right: 20rpx;
					     height: 40rpx;
					     line-height: 40rpx;
					 text{
						 font-size: 22rpx;
					 }
					 i{
						display: inline-block;
						max-width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: pre;
						float: left;
						color: #c3ab7c;
						font-size: 22rpx; 
						margin-right: 5rpx;
					 }
				 }
				}
		.p_fCheckbox {display: flex;flex-wrap: wrap;}
		.p_fCheckbox2 {max-height: 485rpx;overflow: hidden;width: 100%;}
		.p_fCheckbox2.active {max-height: auto;overflow: auto;width: 100%;}
		.p_fcItem {width: 170rpx;height: 76rpx;text-align: center;font-size: 22rpx;padding: 0 8rpx;margin: 20rpx 20rpx 0 0;border: 1px solid #e5deca;border-radius: 4rpx;background: #fff;display: flex;justify-content: center;align-items: center;
			&.active {color: #fff;border-color: #c3ab7c;background: #c3ab7c;}
		}
		.p_fInputMore {margin-top: 20rpx;display: flex;}
		.p_fInput {width: 244rpx;height: 66rpx;text-align: center;border-radius: 4rpx;background: #f6f7fb;		
			& > input {width: 100%;height: 100%;font-size: 22rpx;}
		}
		.p_fGap {width: 60rpx;height: 66rpx;line-height: 66rpx;text-align: center;color: #707070;}
		.p_fBtm {height: 114rpx;border-top: 1px solid #f8f6f3;box-sizing: content-box;display: flex;justify-content: center;align-items: center;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.p_fReset, .p_fConfim {width: 258rpx;height: 60rpx;color: #fff;border-radius: 36rpx;background: #c3ab7c;display: flex;justify-content: center;align-items: center;
			&:active {opacity: .88;}
		}
		.p_fReset {color: #c3ab7c;margin-right: 32rpx;border: 1px solid #c2ab7b;background: #fff;}
	}
}
.b_container {position: relative;overflow: hidden;flex: 1;}
	// 搜索
	.b_search {width: 100%;height: 122rpx;background: #fff;position: absolute;top: 0;left: 0;z-index: 2;overflow: hidden;
		.b_sInput {height: 74rpx;padding: 0 70rpx;margin: 24rpx 36rpx 0;border-radius: 38rpx;background: rgba(246, 247, 251, .8);position: relative;
			& > input {width: 100%;height: 100%;}
			.i_siIcon {width: 70rpx;height: 74rpx;line-height: 74rpx;color: #666;font-size: 32rpx;padding-left: 28rpx;position: absolute;top: 0;left: 0;}
		}
	}
	.b_scroll {width: 100%;height: 100%;padding-top: 122rpx;}
	// 精选推荐
	.b_recomd {padding: 24rpx 0 56rpx 36rpx;background: #fff;
		.b_rTitle {height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: bold;color: #000;}
		.b_rList {display: flex;flex-wrap: wrap;}
		.b_rItem {width: 144rpx;height: 144rpx;margin: 32rpx 32rpx 0 0;border-radius: 8rpx;background: #f6f7fb;}
		.b_rImg {width: 96rpx;height: 96rpx;margin: 6rpx auto 0;}
		.b_rTxt {height: 32rpx;line-height: 32rpx;text-align: center;color: #939393;font-size: 22rpx;}
	}
	// 数据
	.b_sort {padding-bottom: 32rpx;
		.b_sGroup {}
		.b_sTit {height: 64rpx;line-height: 68rpx;font-weight: bold;padding-left: 36rpx;background: #f8f8f8;position: sticky;top: 0;z-index: 2;}
		.b_sList {padding-left: 38rpx;background: #fff;}
		.b_sItem {height: 138rpx;line-height: 138rpx;padding-left: 180rpx;position: relative;
			&::after {content: "";width: 100%;height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
			&:nth-last-child(1)::after {content: none;}
		}
		.b_sLogo {width: 96rpx;height: 96rpx;margin-top: -48rpx;background: #f6f7fb;position: absolute;top: 50%;left: 60rpx;}
	}
	// 筛选
	.b_filter {width: 52rpx;position: fixed;top: 50%;right: 0;z-index: 2;transform: translateY(-50%);
		.b_fLetter {height: 32rpx;line-height: 32rpx;text-align: center;font-size: 20rpx;padding-left: 20rpx;}
	}
.setchose{
	display: block;
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: -15rpx;
	top:50%;
	margin-top: -20rpx;
	background: url(@/static/mall/uncheck.png) no-repeat center center;
	background-size: 100%;
}
.setchose.active{
	background: url(@/static/mall/selected.png) no-repeat center center;
	background-size: 100%;
}
.b_sName{
	text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	    width: 80%;
	    height: 138rpx;
	    line-height: 138rpx;
}
.yprice{
		    border: 1px #E9423E solid;
		    display: inline-block;
		    font-size: 16rpx;
		    line-height: 30rpx;
		    padding-right: 10rpx;
			    color: #e9423e;
				margin-top: 10rpx;
				border-radius: 3rpx;
		i{
			    display: inline-block;
			    background: #E9423E;
			    color: #fff;
			    font-weight: normal;
			    font-size: 16rpx;
				line-height: 34rpx;
				float: left;
			    padding: 0 10rpx;
			    margin-right: 5rpx;
		}
		text{
			    font-size: 22rpx;
		}
	}
</style>